6.2.4 - SUI Labels


A label is just text which can be added to a panel or container. In SUI it's declared as SLabel and you can control it's size, font, color, style etc.

To add it to a container we use the same way with other UI elements using - or .Add:


// using "-"
var panel = RegisterNewPanel("panel id", true).Anchor(AnchorType.MiddleCenter).Background(Color.blue, EBackground.RoundedStandard).Size(1280, 720);
var container = SContainer.Background(Color.green).Anchor(AnchorType.Fill)
                    - SLabel.Text("").FontColor(Color.black); // adding the label to the container and setting black font color

// using .Add
var panel = RegisterNewPanel("panel id", true).Anchor(AnchorType.MiddleCenter).Background(Color.blue, EBackground.RoundedStandard).Size(1280, 720);
var container = SContainer.Background(Color.green).Anchor(AnchorType.Fill);
var label = SLabel.Text("").FontColor(Color.black); // creating the label with black font color
container.Add(label); // adding the label to the container

panel.Add(container); // adding the container to the panel
            
Black label in container

Styling the label

We can further change the label appearance with some methods:

  • .FontSize: to change it's font size
  • .FontColor: to change the text color
  • .Font: to change the font
  • .Alignment: to align it on the right, on the left, on the top etc.


// creating a label with a font size of 128 and left aligned
var panel = RegisterNewPanel("panel id", true).Anchor(AnchorType.MiddleCenter).Background(Color.blue, EBackground.RoundedStandard).Size(1280, 720);
var container = SContainer.Background(Color.green).Anchor(AnchorType.Fill)
                    - SLabel.Text("Label").FontColor(Color.black).FontSize(128).Alignment(TMPro.TextAlignmentOptions.Left);

panel.Add(container);
            
Big label left aligned